<template>
  <div id="diagramContainer">
    <div v-for="(item,index) in WorkFlow" :key="index" :class="item.ClassName" :style="divpos(index)" :id="'item'+index">
      <span v-if="item.ClassName!=='startnode'&&item.ClassName!=='endnode'">
        <span style="font-size:30px">{{index}}</span> <span v-if="item.Bumen" style="font-size:16px">[{{item.Bumen}}]</span>
      </span>
      <span class="personname" style="font-size:16px">{{item.UserName}}</span>
      <el-popover v-if="item.Name" placement="top-start" trigger="hover">
        <div>节点：<b>{{item.Name}}</b></div>
        <div>时间：<b>{{item.FinishTime}}</b></div>
        <div>意见：<b>{{item.Yijian}}</b></div>
        <i slot="reference" v-if="item.ClassName==='currentnode'" class="el-icon-star-on" style="font-size:26px; color:#f30"></i>
        <i slot="reference" v-else-if="item.ClassName==='fangannode'" class="el-icon-document" style="font-size:26px; color:#06f"></i>
        <i slot="reference" v-else-if="item.ClassName==='zhixingnode'" class="el-icon-document" style="font-size:26px; color:#f90"></i>
        <i slot="reference" v-else-if="item.ClassName==='zhenggainode'" class="el-icon-document" style="font-size:26px; color:#060"></i>
        <i slot="reference" v-else class="el-icon-document" style="font-size:26px; color:#666"></i>
      </el-popover>
    </div>
  </div>
</template>
<script>
// import jsPlumb from 'jsplumb'
export default {
  data () {
    return {
      perRowNumber: 0,
      instance: '',
      connection: '',
      WorkFlow: []
    }
  },
  props: {
    timestamp: ''
  },
  watch: {
    timestamp (val) {
      console.log('重新getinfo')
      this.getinfo()
    }
  },
  methods: {
    getinfo () {
      if (this.instance) {
        let conns = this.instance.getAllConnections()
        if (conns) {
          for (let i = 0; i < conns.length; i++) {
            console.log('删除线段')
            this.instance.deleteConnection(conns[i])
          }
        }
      }
      var _this = this
      let para = {
        id: this.$route.params.id
      }
      // var personParams = { Page: 0, Pagenum: 20, Personname: '', Unitkey: '', Sortkey: '', Isace: true, timestamp: new Date().getTime() }
      this.$http
        .post(`/shenghuohui/unitliucheng`, para)
        .then(function (response) {
          if (response.data.IsSuccess === true) {
            console.log('获取成功')
            _this.WorkFlow = response.data.WorkFlow
            _this.$nextTick(function () { _this.drawLct() })
          } else {
            _this.$message({
              message: '获取失败:' + response.data.Msg,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    divpos (index) {
      let x0 = 50
      let y0 = 10
      let row = Math.floor(index / this.perRowNumber)
      let col = index % this.perRowNumber
      let rowtype = row % 2
      let x = 0
      if (rowtype === 0) {
        x = x0 + col * 260
      } else {
        x = x0 + (this.perRowNumber - col - 1) * 260
      }
      let y = y0 + row * 120
      let stylestr = 'left:' + x + 'px;top:' + y + 'px'
      console.log(stylestr)
      return stylestr
    },
    drawLct () {
      console.log('enter mounted')
      console.log(this.perRowNumber)
      // eslint-disable-next-line no-undef
      jsPlumb.ready(() => {
        console.log('enter jsPlumb.ready')
        if (!this.instance) {
          // eslint-disable-next-line no-undef
          this.instance = jsPlumb.getInstance({ Container: 'diagramContainer' })
        }
        this.WorkFlow.forEach((element, index) => {
          this.instance.draggable('item' + index, { containment: 'parent' })
        })
        for (let i = 0; i < this.WorkFlow.length - 1; i++) {
          let row = Math.floor(i / this.perRowNumber)
          let col = i % this.perRowNumber
          let rowtype = row % 2
          let fangxiang = ['Right', 'Left']
          if (rowtype === 0 && this.perRowNumber - 1 - col === 0) {
            fangxiang = ['Right', 'Right']
          }
          if (rowtype === 1 && this.perRowNumber - 1 - col === 0) {
            fangxiang = ['Left', 'Left']
          }
          this.instance.connect({
            // uuids: ['fromId', 'toId'],
            source: 'item' + i,
            target: 'item' + (i + 1),
            // endpoint: 'Rectangle',
            connector: ['Flowchart', { gap: 6, cornerRadius: 10, alwaysRespectStubs: true }],
            anchor: fangxiang,
            paintStyle: { stroke: '#61B7CF', strokeWidth: 2 },
            hoverPaintStyle: { stroke: 'red', strokeWidth: 2 },
            endpointStyle: {
              fill: 'green',
              radius: 6,
              outlineStroke: 'darkgray',
              outlineWidth: 1
            },
            overlays: [
              ['Arrow', { width: 12, length: 6, location: 1 }],
              [
                'Label',
                {
                  location: 0.5,
                  label: '',
                  cssClass: 'endpointTargetLabel',
                  visible: true,
                  id: 'label'
                }
              ]
            ]
          })
        }
      })
    }
  },
  mounted () {
    console.log('mounted重新getinfo')
    this.perRowNumber = Math.floor(document.body.clientWidth / 260) - 1
    this.getinfo()
  }
}
</script>
<style scoped>
#diagramContainer {
  position: absolute;
  padding: 20px;
  width: 95%;
  height: 860px;
}
#diagramContainer div{
  -moz-border-radius: 0.5em;
  border-radius: 0.5em;
  opacity: 0.8;
  filter: alpha(opacity=80);
  border: 1px solid #06f;
  width: 200px;
  /*line-height: 40px;*/
  text-align: center;
  z-index: 20;
  position: absolute;
  background-color: #eeeeef;
  color: black;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
  height: 50px;
  line-height: 50px;
}
#diagramContainer div .personname{
  color:blue;
  font-weight:bolder;
}
#diagramContainer div.startnode{
  -moz-border-radius: 5em;
  border-radius: 5em;
  width:50px;
  background: #5cb85c;
}
#diagramContainer div.endnode{
  -moz-border-radius: 5em;
  border-radius: 5em;
  width:50px;
  background: #f30;
}
#diagramContainer div.currentnode{
  width: 198px;
  height: 48px;
  border: 2px solid #f30
}
#diagramContainer div.zhixingnode{
  width: 198px;
  height: 48px;
  border: 2px solid #f90
}
#diagramContainer div.zhenggainode{
  width: 198px;
  height: 48px;
  border: 2px solid #060
}
#diagramContainer div.fangannode{
  width: 198px;
  height: 48px;
  border: 2px solid #0066ff
}
#diagramContainer div.startnode .personname,#diagramContainer div.endnode .personname{
  color:#fff !important;
  font-size:20px;
}
.radius {
  border-radius: 25em;
}
#diagramContainer div:hover {
  box-shadow: 2px 2px 19px #444;
  -o-box-shadow: 2px 2px 19px #444;
  -webkit-box-shadow: 2px 2px 19px #444;
  -moz-box-shadow: 2px 2px 19px #444;
  opacity: 0.8;
  filter: alpha(opacity=80);
}
</style>
